'use client'

import { useState, useEffect } from 'react'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { useToast } from '@/components/ui/use-toast'
import Loading from '@/components/Loading'
import useRequest from '@/utils/request'
import Pricing from '@/components/Pricing'
import Faq from '@/components/Faq'

export default function Billing() {
  const [loading, setLoading] = useState(true)
  const [projects, setProjects] = useState([])
  const [paginationConfig, setPaginationConfig] = useState({
    total: 0,
    per_page: 0,
    current_page: 0,
    last_page: 0,
  })
  const { toast } = useToast()
  const request = useRequest()

  const fetchData = async () => {
    const res = await request.get('red_growth/project')
    setLoading(false)
    setProjects(res.data.data)
    setPaginationConfig({
      total: res.data.total,
      perPage: res.data.per_page,
      currentPage: res.data.current_page,
      lastPage: res.data.last_page,
    })
  }

  useEffect(() => {
    fetchData()
  }, [])

  if (loading) {
    return <Loading />
  }

  return (
    <Card x-chunk="dashboard-06-chunk-0">
      <CardHeader>
        <CardTitle>Billing</CardTitle>
        <CardDescription>
          {/* <p>Your plan: Free Trial</p>
          <p>Trial ends Jun 22, 2024</p> */}
        </CardDescription>
      </CardHeader>
      <CardContent>
        <Pricing showTitile={false} />
        <Faq />
      </CardContent>
    </Card>
  )
}
